<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />

		<link rel="stylesheet" href="css/style.css" />
		<title>动态发布</title>

		<style>
			/* 隐藏图标 */
			#thumbnail {
				display: none;
			}

			#info {
				padding: 1rem;
				border: 0;
				width: 90%;
			}
		</style>
	</head>
	<body>
		<div data-role="page" class="bg">
			<div data-role="header" data-position="fixed" id="opcitybg">
				<a id="headop" href="#" data-role="button" data-icon="carat-l" data-rel="back"
					data-iconpos="notext"></a>
				<h1>发布动态</h1>

			</div>

			<div data-role="main" class="ui-content">
				<div class="ui-field-contain">
					<label for="info" class="ui-hidden-accessible">动态内容:</label>
					<textarea name="info" id="info" rows="10" data-role="none" type="text"
						placeholder="分享新鲜事!"></textarea>
					<label for="thumbnail" class="ui-hidden-accessible">添加图片:</label>
					<!-- 这个被藏起来了 -->
					<input type="file" id="thumbnail" name="thumbnail" data-role="none">
					<i class="fa fa-image fa-4x" id="uploadImg"></i>
				</div>

			</div>

			<div data-role="footer" data-position="fixed" id="footerbg">
				<div data-role="navbar">
					<ul>
						<li><a calss="headop" href="#" id="release" data-icon="check" data-ajax="false">发布</a></li>
						<li><a calss="headop" href="c_activity.html" data-icon="delete" data-ajax="false">取消</a></li>
					</ul>
				</div>
			</div>

		</div>
	</body>

	<script>
		//获取图片的url,为数据activity的图片做准备
		var imgUrl = new Array();

		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) { // 默认
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox) 火狐兼容
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome 谷歌兼容
				url = window.webkitURL.createObjectURL(file);
			}

			return url;
		}
		//将图片显示出来
		$('#thumbnail').change(function() {
			var eImg = $('<img />');
			eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input
			//设置图片宽度为100%
			eImg.attr('width', '100%');
			$(this).after(eImg);
			//获取绝对地址
			var surl = this.value;
			surl = "img/activity/" + surl.split('\\')[2];
			console.log(surl);
			imgUrl.push(surl);
		});

		//修改图片上传样式
		$('#uploadImg').click(function() {
			$('#thumbnail').click();
		});

		//存储对象
		function storageObj(id, obj) {
			//json.stringify可以将对象转换为 JSON 字符串
			var checkedIdStr = JSON.stringify(obj);
			//存储id和json字符串
			localStorage.setItem(id.toString(), checkedIdStr);
		};

		//设置好对象模板，发布之后为它重新赋值
		//这些数据,都是默认值,后面会被覆盖掉
		var activityObj = {
			//act1在id=1前加act目的是与其他数据做区分，便于过滤器过滤
			actId: "act1",
			actTime: new Date(),
			actUser: "测试用户",
			info: "今天天气真不错",
			actUrl: ["img/activity/act31.jpg", "img/activity/act32.jpg"]
		};

		//过滤器,过滤掉非activity数据
		function filterActLocal() {
			var actIDArray = new Array();
			//过滤
			for (var i = 0; i < localStorage.length; i++) {
				var key = localStorage.key(i); //获取本地存储的Key
				var filterStr = /^(act)[0-9]$/;
				//判断是否为活动数据
				if (filterStr.test(key)) {
					//判断key是否已经存在,inArray返回元素位置，没找到返回-1；
					if ($.inArray(key, actIDArray) != -1) {
						//console.log($.inArray(key, actIDArray));
						continue;
					} else {
						//采取压栈的方式
						actIDArray.push(key);
					}
				} else {
					continue;
				}
			}
			//json.stringify可以将对象转换为 JSON 字符串
			var actIDArrayStr = JSON.stringify(actIDArray);
			//将id数组存到localStorage,相当于建一个索引表
			localStorage.setItem("actIDArray", actIDArrayStr);
		}

		//默认数组下标为0
		var actLen = 0;
		//判断是否有数据
		if (localStorage.getItem("actIDArray")) {
			console.log("lenth", actLen);
			//获取数组对象长度
			actIDArray = JSON.parse(localStorage.getItem("actIDArray"))
			actLen = actIDArray.length;
			console.log("lenth", actLen);
		}

		//获取活动索引表的长度
		function getActArrayLen() {
			var actLen = 0;
			//判断是否有数据
			if (localStorage.getItem("actIDArray")) {
				//获取数组对象长度
				actIDArray = JSON.parse(localStorage.getItem("actIDArray"))
				actLen = actIDArray.length;
				console.log("lenth", actLen);
			}
			return actLen;
		}

		//创建活动ID
		function creatActID() {
			var actID;
			var actLen = getActArrayLen();
			//console.log("actLenth",actLen);
			//act1在id=1前加act目的是与其他数据做区分，便于过滤器过滤
			actID = "act" + actLen;
			return actID;
		}

		//设置活动列表
		function setActContent(actObj) {
			actObj.actId = creatActID(); //根据列表生成
			actObj.info = $("#info").val(); //获取输入框中的字符串
			actObj.actTime = new Date(); //创建日期
			actObj.actUser = sessionStorage["LoginName"]; //登录者的用户名
			actObj.actUrl = imgUrl;
			return actObj;
		}

		//发布
		function Release() {
			activityObj = setActContent(activityObj);
			console.log(activityObj);
			//存入数据
			storageObj(activityObj.actId, activityObj);
			//更新索引
			filterActLocal();
		}

		//点击事件
		$("#release").click(function() {
			console.log($("#info").val());
			if ($("#info").val()) {
				Release();
				//发布之后跳转页面
				location.href = "c_activity.html";
			} else {
				alert("请输入内容");
				$("#info").attr('border', '#f00 1px solid');
			}

		});

		// JSON.parse可以将 JSON 字符串转换为对象
		var theAct = JSON.parse(localStorage.getItem(activityObj.actId));
		//console.log(activityObj, theAct.info); 
	</script>
</html>
